<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cap</title>
    <link rel="icon" href="./public/logo.png" />
    <style>
      * {
        font-family: system, -apple-system, "BlinkMacSystemFont", ".SFNSText-Regular",
          "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", "Ubuntu",
          "arial", sans-serif;
        box-sizing: border-box;
      }

      body {
        max-width: 600px;
        padding: 15px;
        margin: 3rem auto;
        background-color: #121214;
        color: #e8e8ea;
      }

      nav .logo {
        width: 30px;
        height: 30px;
        display: block;
        margin-bottom: -4px;
      }

      nav {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      nav a {
        margin-left: auto;
        color: inherit;
        text-decoration: none;
        font-size: 14px;
        opacity: 0.7;
      }
      nav a:hover {
        opacity: 1;
      }

      nav h1 {
        font-weight: 500;
        margin: 0px;
        font-size: 20px;
        margin-left: 6px;
      }

      p.text {
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.8);
        font-size: 15px;
      }

      h2 {
        font-weight: 600;
        font-size: 23px;
      }

      .title {
        display: flex;
        gap: 4px;
        align-items: center;
      }

      .title button {
        margin-left: auto;
      }

      button.btn {
        padding: 6px 10px;
        border-radius: 6px;
        border: none;
        color: white;
        background: #0076d8;
        background-origin: border-box;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      button.btn:focus {
        box-shadow: inset 0px 0.8px 0px -0.25px rgba(0, 118, 216, 0.2),
          0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(0, 118, 216, 0.5);
        outline: 0;
      }

      button.btn:disabled {
        opacity: 0.4;
        filter: grayscale(1);
        pointer-events: none;
      }

      .dialog-wrapper {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fade-in 0.2s;
      }

      @keyframes fade-in {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .dialog-wrapper .dialog {
        max-width: 450px;
        width: 100%;
        background-color: #18181a;
        border-radius: 18px;
        padding: 20px;
        position: relative;
        animation: dialog-in 0.2s;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px,
          rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px,
          rgba(0, 0, 0, 0.09) 0px -3px 5px;
      }

      @keyframes dialog-in {
        0% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }

      .dialog .close-button {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: transparent;
        border: none;
        color: #e8e8ea;
        cursor: pointer;
      }

      .dialog h2 {
        margin: 0px;
        font-size: 20px;
        margin-bottom: 16px;
        user-select: none;
      }

      .dialog .actions {
        display: flex;
        align-items: center;
        gap: 12px;
        user-select: none;
      }

      .key-creation-form {
        display: flex;
        flex-direction: column;
        margin-bottom: 18px;
        margin-top: 6px;
      }

      .key-creation-form label {
        font-size: 14px;
        margin-bottom: 6px;
        opacity: 0.9;
        user-select: none;
      }

      .key-creation-form input {
        border-radius: 8px;
        border: none;
        padding: 10px 14px;
        border: 1px solid rgba(255, 255, 255, 0.17);
        background-color: transparent;
        color: inherit;
      }

      .key-creation-form input:focus {
        outline: none;
        box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.2);
      }

      .key-creation-form input:disabled {
        opacity: 0.5;
        pointer-events: none;
      }

      .keys p {
        text-align: center;
        margin: 0px;
        margin-top: 8px;
        opacity: 0.8;
        font-size: 15px;
      }

      .keys .copy-key {
        padding: 6px 10px;
        border-radius: 6px;
        border: none;
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
        background-origin: border-box;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .keys .copy-key:focus {
        box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2),
          0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(255, 255, 255, 0.1);
        outline: 0;
      }

      .keys .edit-key {
        border: none;
        background-color: transparent;
        touch-action: manipulation;
        cursor: pointer;
        opacity: 0.8;
        color: inherit;
        padding: 0px;
        margin-right: 8px;
        margin-bottom: -4px;
        display: block;
      }

      .keys .edit-key:hover {
        opacity: 1;
      }

      .keys .key {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
      }

      .key .key-name {
        margin-right: auto;
      }

      .action-secundary {
        border: none;
        padding: 0px;
        background-color: transparent;
        color: white;
        cursor: pointer;
        opacity: 0.8;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
      }

      .action-secundary:hover {
        opacity: 1;
      }

      .dialog .actions-col {
        flex-direction: column;
        align-items: start;
      }

      .key-id {
        opacity: 0.8;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <nav>
      <img src="./public/logo.png" alt="Cap logo" class="logo" />
      <h1>Cap</h1>
      <a href="/internal/auth/logout" class="logout">Logout</a>
    </nav>

    <div class="title">
      <h2>Your keys</h2>
      <button class="new-keys btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus-icon lucide-plus"
        >
          <path d="M5 12h14" />
          <path d="M12 5v14" />
        </svg>
        Create key
      </button>
    </div>

    <div class="keys">
      <p>Loading keys...</p>
    </div>
  </body>
  <script src="/public/index.js"></script>
</html>
